<template>
  <div class="home">
    <div class="back" @click="goPage('login')">退出登录</div>
    <div
      class="person"
      :style="{
        background: 'url(' + personImg + ') no-repeat',
        height: itemHeight + 'px'
      }"
    >
      <div class="avatar">
        <div class="imgBox">
          <img
            v-if="info.is_vip === 1"
            class="vipImg"
            src="@/assets/img/vip.gif"
            alt=""
          />
          <img class="avatarImg" :src="changeHead(info.head_thumb)" alt="" />
        </div>
        <div>
          <h2>{{ filterName(info.username) }}</h2>
          <br />
          <span v-if="info.is_vip === 1"
            ><img class="vipText" src="@/assets/img/vip.png" alt=""
          /></span>
        </div>
      </div>
      <div class="rule common-sz">
        <img src="@/assets/img/sz.png" alt="" />
        <span>我的排名：{{ info.num }}</span>
      </div>
      <div class="info">
        <div class="common-sz" @click="goPage('record')">
          <img src="@/assets/img/sz.png" alt="" />
          <span>我的福鼠：{{ info.money }}</span>
        </div>
        <div class="common-sz" @click="showRule = true">
          <img src="@/assets/img/sz.png" alt="" />
          <span>游戏规则</span>
        </div>
      </div>
    </div>
    <div class="dl">
      <div @click="goPage('sign')">
        <img src="@/assets/img/dl1.png" alt="" />
        <span>签到</span>
      </div>
      <div @click="goPage('question')">
        <img src="@/assets/img/dl2.png" alt="" />
        <span>每日答题</span>
      </div>
      <div @click="goPage('ydy')">
        <img src="@/assets/img/dl3.png" alt="" />
        <span>押电影</span>
      </div>
      <div @click="goPage('ranking')">
        <img src="@/assets/img/dl4.png" alt="" />
        <span>风云榜</span>
      </div>
    </div>
    <md-landscape v-model="showPic" @hide="getInfo">
      <img src="https://test.hrycf.com/hry/gift/fs.png" />
    </md-landscape>
    <img src="@/assets/img/fs.png" class="fs" alt="" />
    <md-landscape v-model="showRule" full-screen>
      <div
        class="ruleBox"
        :style="{ background: 'url(' + ruleBg + ') no-repeat' }"
      >
        <div class="ruleText">
          <ul>
            <li>
              <span class="title">一. 活动日期</span
              ><br />即日起至2020年1月31日24:00。
            </li>
            <br />
            <li>
              <span class="title">二. 参与条件</span><br />好融艺平台用户。
            </li>
            <br />
            <li>
              <span class="title">三. 活动内容</span>
              <ol>
                <li>
                  第一环节——猜票房押电影:<br />
                  <span class="content">
                    1月22日至1月24日24:00期间，选择您认为春节期间票房最高的电影，进行一次票房押宝。最终押宝结果将在2020年2月1日公布，所有押宝成功的用户，可获得500个福鼠的奖励。
                  </span>
                </li>
                <li>
                  第二环节——答题领福鼠，春节赢豪礼：
                  <ol>
                    <li>
                      签到领福鼠：大年初一至大年初七期间（2020年1月25日至1月31日），所有参与活动的用户可以在签到页进行签到，每次签到获得50个福鼠，每日24:00更新。好融艺用户可以签到两天（1月25日-1月26日），VIP用户可以签到七天（1月25日-1月31日），七天全部签到的用户会收到额外赠送的福鼠。
                    </li>
                    <li>
                      每日竞答：大年初一至大年初七（2020年1月25日至1月31日），每日10:00至24:00，每天5题，每题的答题时间为15秒，根据答对题目的数量，获取相应的福鼠。答对一题获得10个福鼠，答对两题获得30个福鼠，答对三题获得60个福鼠，答对四题获得100个福鼠，答对五题获得150个福鼠。
                    </li>
                  </ol>
                </li>
              </ol>
            </li>
            <br />
            <li>
              <span class="title">四. 活动奖品：</span><br />
              福鼠分好礼：在宣布票房结果后，平台将锁定福鼠排行榜，排名前20的用户将会赢取我们的大奖。
              <ol>
                <li>
                  获奖规则：<br />
                  <span class="content"
                    >第1名获得鼠你最旺奖，第2名至第4名获得鼠年大吉奖，第5名至第10名获得福鼠迎春奖，第11名至第20名获得鼠你幸运奖。</span
                  >
                </li>
                <li>
                  奖品名单：
                  <ul>
                    <li>鼠你最旺奖：小米智能AI音箱</li>
                    <li>
                      鼠年大吉奖：任一视频平台VIP用户月卡（优酷/腾讯/爱奇艺）
                    </li>
                    <li>福鼠迎春奖：好融艺新年礼盒（定制）</li>
                    <li>鼠你幸运奖：新年幸运红包</li>
                  </ul>
                </li>
              </ol>
            </li>
            <br />
            <li>
              <span class="title">五. 奖品兑换</span><br />
              <p>
                活动结束之后即可联系好融艺官方客服haorongyikefu，凭借排名截图及手机号进行兑奖。<br />好融艺工作人员在核实中奖信息后，将在活动结束后的10个工作日内，统一发放奖品。
                <br /><br /><span class="des"
                  >注：请确认好融艺平台绑定的联络手机号码真实可靠</span
                >
              </p>
            </li>
          </ul>
        </div>
      </div>
    </md-landscape>
  </div>
</template>

<script>
import wx from "weixin-jsapi";
import personImg from "@/assets/img/person.png";
import ruleBg from "@/assets/img/ruleBg.png";
import { Popup, Landscape, Button, Toast, PopupTitleBar } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Popup.name]: Popup,
    [Landscape.name]: Landscape,
    [Button.name]: Button,
    [PopupTitleBar.name]: PopupTitleBar
  },
  data() {
    return {
      showPic: false,
      ruleBg: ruleBg,
      personImg: personImg,
      showRule: false,
      itemHeight: 255
    };
  },
  methods: {
    filterName(name) {
      if (name.length > 4) {
        return name.slice(0, 1) + "*" + name.substr(name.length - 1, 1);
      } else {
        return name;
      }
    },
    changeHead(url) {
      if (url) {
        let prefix = "https://www.hrycf.com/";
        if (url.indexOf("/uploads/headimg") !== -1) {
          return prefix + url;
        } else {
          return prefix + "uploads/headimg/" + url;
        }
      } else {
        return "https://test.hrycf.com/front/avatar.jpg";
      }
    },
    goPage(routeName) {
      this.$router.push({ name: routeName });
    },
    getInfo() {
      this.$ajax
        .post(this.$api.getInfo, false, true)
        .then(res => {
          this.$store.dispatch("changeInfo", res);
          if (res.is_vip === 1 && res.is_add === 1) {
            this.showPic = true;
          }
        })
        .catch(err => {
          Toast.failed(err, 3000, true);
        });
    },
    logout() {
      localStorage.removeItem("mtoken");
      sessionStorage.clear();
      this.$router.push({ name: "login" });
    },
    getConfig() {
      wx.ready(() => {
        this.wxShare();
      });
    },
    wxShare() {
      let self = this;
      const share_title = "答题押电影，豪礼领不停！";
      const share_desc =
        "是时候展现你的票房预测能力了，签到再答题，福鼠天天送，瓜分新年豪礼！";
      const share_link = "http://gift.hrycf.com";
      const share_img = "https://test.hrycf.com/hry/gift/cj.png";
      wx.showOptionMenu();
      wx.onMenuShareTimeline({
        title: share_title, // 分享标题
        link: share_link, // 分享链接
        imgUrl: share_img
      });
      wx.onMenuShareAppMessage({
        title: share_title, // 分享标题
        desc: share_desc, // 分享描述
        link: share_link, // 分享链接
        imgUrl: share_img,
        success: function() {
          self.getOneOpportunity();
        }
      });
    }
  },
  created() {
    this.getInfo();
    this.itemHeight = (255 / 686) * document.body.clientWidth;
  },
  mounted() {
    this.getConfig();
  },
  computed: {
    isValidate() {
      return this.$store.state.isValidate;
    },
    isLogin() {
      return this.$store.state.isLogin;
    },
    info() {
      return this.$store.state.info;
    }
  }
};
</script>

<style scoped lang="less">
.home {
  height: 100%;
  width: 100%;
  background: -moz-linear-gradient(
    top,
    rgba(163, 7, 1, 1) 0%,
    rgba(255, 182, 88, 0.8) 55%,
    rgba(222, 12, 0, 1) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(163, 7, 1, 1) 0%,
    rgba(255, 182, 88, 0.8) 55%,
    rgba(222, 12, 0, 1) 100%
  );
  background: -o-linear-gradient(
    top,
    rgba(163, 7, 1, 1) 0%,
    rgba(255, 182, 88, 0.8) 55%,
    rgba(222, 12, 0, 1) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(163, 7, 1, 1) 0%,
    rgba(255, 182, 88, 0.8) 55%,
    rgba(222, 12, 0, 1) 100%
  );
  background: linear-gradient(
    0deg,
    rgba(163, 7, 1, 1) 0%,
    rgba(255, 182, 88, 0.8) 55%,
    rgba(222, 12, 0, 1) 100%
  );
  position: relative;
  padding: 161px 0 0 0;
  .back {
    position: fixed;
    padding: 20px 50px;
    top: 20px;
    right: 30px;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 40px;
    z-index: 12;
  }
  .person {
    width: calc(100% - 64px);
    margin: 0 32px;
    background-size: 100%, 100% !important;
    position: relative;
    .rule {
      position: absolute;
      right: 32px;
      top: 11px;
      span {
        color: rgba(41, 43, 50, 1) !important;
      }
    }
    .common-sz {
      img {
        width: 87px;
        vertical-align: middle;
        margin-right: 16px;
      }
      span {
        color: rgba(190, 12, 24, 1);
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 500;
      }
    }
    .info {
      position: absolute;
      bottom: 22px;
      width: 100%;
      padding: 0 31px;
      .flex_content();
      .flex_align_center();
      .flex_justify_space();
    }
    .avatar {
      position: absolute;
      top: -29px;
      left: 30px;
      .flex_content();
      .flex_align_center();
      .imgBox {
        margin-right: 21px;
        position: relative;
        .vipImg {
          height: 80px;
          position: absolute;
          left: -14px;
          top: -50px;
        }
        .avatarImg {
          width: 128px;
          height: 128px;
          border-radius: 50%;
        }
      }
      .vipText {
        width: 42px;
      }
      h2 {
        display: inline-block;
        font-size: 36px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(41, 43, 50, 1);
        margin-top: 10px;
      }
    }
  }
  .dl {
    padding: 0 50px;
    .flex_content();
    > div {
      .flex_one ();
      text-align: center;
      img {
        width: 100%;
        padding: 0 15px;
      }
      span {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(190, 12, 24, 1);
        line-height: 90px;
      }
    }
  }
  .fs {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 692px;
  }
}
.ruleBox {
  width: 100%;
  height: 100%;
  background-size: 100%, 100% !important;
  padding: 150px 0 40px 0;
  .ruleText {
    padding: 0 70px;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    ol {
      margin-block-start: 0.6em;
      margin-block-end: 0.6em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 30px;
      > li {
        list-style-type: decimal;
        font-size: 32px;
        line-height: 50px;
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
        ul {
          li {
            line-height: 50px;
            margin-bottom: 10px;
          }
        }
        ol {
          li {
            list-style-type: lower-latin;
            margin-bottom: 20px;
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
      .content {
      }
    }
    ul {
      li {
        font-size: 36px;
        line-height: 68px;
        margin-bottom: 10px;
        .title {
          font-weight: bold;
        }
      }
    }
    .des {
      font-size: 28px;
    }
  }
}
</style>
